﻿@page "/buttons"

<Block Title="Button 按钮" Introduction="常用的操作按钮。">
    <CardBodyTemplate>
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Primary">主要按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Secondary">次要按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Success">成功按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Danger">危险按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Warning">警告按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Info">信息按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Dark">黑暗按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Light">高亮按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Link">链接按钮</Button></div>
            </div>
        </div>
        <Logger @ref="Trace" class="mt-3" />
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Button Color="Color.Primary"&gt;主要按钮&lt;/Button&gt;
&lt;Button Color="Color.Secondary"&gt;次要按钮&lt;/Button&gt;
&lt;Button Color="Color.Success"&gt;成功按钮&lt;/Button&gt;
&lt;Button Color="Color.Danger"&gt;危险按钮&lt;/Button&gt;
&lt;Button Color="Color.Warning"&gt;警告按钮&lt;/Button&gt;
&lt;Button Color="Color.Info"&gt;信息按钮&lt;/Button&gt;
&lt;Button Color="Color.Dark"&gt;暗按钮&lt;/Button&gt;
&lt;Button Color="Color.Light"&gt;亮按钮&lt;/Button&gt;
&lt;Button Color="Color.Link"&gt;链接按钮&lt;/Button&gt;
        </pre>
    </CodeTemplate>
</Block>

<Block Title="Outline 按钮" Introduction="常用的操作按钮。">
    <CardBodyTemplate>
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Primary">主要按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Secondary">次要按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Success">成功按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Danger">危险按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Warning">警告按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Info">信息按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Dark">黑暗按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Light">高亮按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Link">链接按钮</Button></div>
            </div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Button IsOutline="true" Color="Color.Primary"&gt;主要按钮&lt;/Button&gt;
&lt;Button IsOutline="true" Color="Color.Secondary"&gt;次要按钮&lt;/Button&gt;
&lt;Button IsOutline="true" Color="Color.Success"&gt;成功按钮&lt;/Button&gt;
&lt;Button IsOutline="true" Color="Color.Danger"&gt;危险按钮&lt;/Button&gt;
&lt;Button IsOutline="true" Color="Color.Warning"&gt;警告按钮&lt;/Button&gt;
&lt;Button IsOutline="true" Color="Color.Info"&gt;信息按钮&lt;/Button&gt;
&lt;Button IsOutline="true" Color="Color.Dark"&gt;暗按钮&lt;/Button&gt;
&lt;Button IsOutline="true" Color="Color.Light"&gt;亮按钮&lt;/Button&gt;
&lt;Button IsOutline="true" Color="Color.Link"&gt;链接按钮&lt;/Button&gt;
        </pre>
    </CodeTemplate>
</Block>

<Block Title="不同尺寸" Introduction="Button 组件提供除了默认值以外的多种尺寸，可以在不同场景下选择合适的按钮尺寸。">
    <CardBodyTemplate>
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraSmall" Color="Color.Primary">超小按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Small" Color="Color.Secondary">小按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.None" Color="Color.Info">按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Medium" Color="Color.Success">中等按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Large" Color="Color.Danger">大按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraLarge" Color="Color.Warning">超大按钮</Button></div>
                <div class="form-group col-12"><Button IsBlock="true" Color="Color.Primary">Block 按钮</Button></div>
            </div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Button Size="Size.ExtraSmall" Color="Color.Primary"&gt;超小按钮&lt;/Button&gt;
&lt;Button Size="Size.Small" Color="Color.Secondary"&gt;小按钮&lt;/Button&gt;
&lt;Button Size="Size.None" Color="Color.Success"&gt;按钮&lt;/Button&gt;
&lt;Button Size="Size.Medium" Color="Color.Danger"&gt;中等按钮&lt;/Button&gt;
&lt;Button Size="Size.Large" Color="Color.Warning"&gt;大按钮&lt;/Button&gt;
&lt;Button Size="Size.ExtraLarge" Color="Color.Info"&gt;超大按钮&lt;/Button&gt;
&lt;Button IsBlock="true" Color="Color.Primary"&gt;Block 按钮&lt;/Button&gt;
        </pre>
    </CodeTemplate>
</Block>

<Block Title="禁用状态" Introduction="按钮不可用状态。">
    <CardBodyTemplate>
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Primary">主要按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Secondary">次要按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Success">成功按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Danger">危险按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Warning">警告按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Info">信息按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Dark">黑暗按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Light">高亮按钮</Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Link">链接按钮</Button></div>
            </div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Button IsDisabled="true" Color="Color.Primary"&gt;主要按钮&lt;/Button&gt;
&lt;Button IsDisabled="true" Color="Color.Secondary"&gt;次要按钮&lt;/Button&gt;
&lt;Button IsDisabled="true" Color="Color.Success"&gt;成功按钮&lt;/Button&gt;
&lt;Button IsDisabled="true" Color="Color.Danger"&gt;危险按钮&lt;/Button&gt;
&lt;Button IsDisabled="true" Color="Color.Warning"&gt;警告按钮&lt;/Button&gt;
&lt;Button IsDisabled="true" Color="Color.Info"&gt;信息按钮&lt;/Button&gt;
&lt;Button IsDisabled="true" Color="Color.Dark"&gt;暗按钮&lt;/Button&gt;
&lt;Button IsDisabled="true" Color="Color.Light"&gt;亮按钮&lt;/Button&gt;
&lt;Button IsDisabled="true" Color="Color.Link"&gt;链接按钮&lt;/Button&gt;
        </pre>
    </CodeTemplate>
</Block>

<Block Title="按钮组" Introduction="由多个按钮组成一个组合按钮">
    <CardBodyTemplate>
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-auto">
                    <div class="btn-group" role="group">
                        <Button Color="Color.Primary">按钮一</Button>
                        <Button Color="Color.Success">按钮二</Button>
                    </div>
                </div>
            </div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;div class="btn-group" role="group"&gt;
  &lt;Button Color="Color.Primary"&gt;按钮一&lt;/Button&gt;
  &lt;Button Color="Color.Success"&gt;按钮二&lt;/Button&gt;
&lt;/div&gt;
        </pre>
    </CodeTemplate>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
